<template>
    <el-button @click="checkDialogFormVisible=true">签到</el-button>
    <div>
        <el-table :data="filterTableData" style="width: 100%">
            <el-table-column label="考勤状态" prop="attendState" />
            <el-table-column label="考勤类型" prop="attendType" />
            <el-table-column label="考勤编号" prop="attendId"/>
            <el-table-column label="签到时间" prop="attendTime"/>
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" @input="filterTableDat" size="small" placeholder="Type to search" />
                </template>
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                    >Edit</el-button
                    >
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                    >申请补签</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--签到-->
    <el-dialog v-model="checkDialogFormVisible" title="签到" size="small">
        <el-select v-model="addAttend.attendType" class="m-2" placeholder="Select" size="small">
            <el-option v-for="d in attendType " :value="d.type" :key="d.type" :lable="d.type"/>
        </el-select>
        <el-button @click="check" size="small">确定</el-button>
        <el-button @click="checkDialogFormVisible=false" size="small">关闭</el-button>
    </el-dialog>

</template>

<script>
    import qs from 'qs'
    import {ElMessage} from "element-plus/es";
    import moment from 'moment'
    export default {
        name: "PersonalAttendance",

        data(){

            return{
                tableData:[],
                search:'',
                filterTableData:[],
                checkDialogFormVisible:false,
                addAttend:{},
                attendType:[]
            }
        },
        methods:{
            attendList(){
                let that=this
                this.$axios.get("http://localhost:8080/attend/list").then(function (res) {
                    that.tableData=res.data
                    for(var item of that.tableData){
                        item.attendTime=moment(item.attendTime).format("YYYY-MM-DD HH:mm")
                    }
                    that.filterTableData=that.tableData.slice(0,3)
                })
            },
            filterTableDat(){
                console.log(this.tableData)
                this.filterTableData=this.tableData.filter(
                    (data) => {
                        return data.attendState.includes(this.search.toLowerCase())
                            ||data.attendType.includes(this.search.toLowerCase())
                            ||data.attendId.toString().includes(this.search.toLowerCase())

                    }
                )
                // for(var item of this.tableData){
                //     console.log(item.name)
                //     console.log(item.name.toLowerCase().includes('1'))
                // }

                //console.log(this.filterTableData[0].pid)
            },
            handleEdit(index,row){
                console.log(index, row)
            },
            handleDelete(index,row){
                console.log(index, row)
            },
            check(){
                let that = this
                console.log(that.addAttend)
                let str=qs.stringify(that.addAttend)
                console.log(str)
                this.$axios.get( "http://localhost:8080/attend/check?"+str).then(function(res) {
                    console.log(res.data)
                    that.attendList()
                    //if(res.data.indexOf('true')>=0){
                        if(res.data==true){
                            ElMessage({
                                message: '签到成功',
                                type: 'success',
                            })
                        }else{
                            ElMessage("fail")
                        }

                })

            }

        },
        created(){
            // this.tableData = [
            //     {
            //         date: '2016-05-03',
            //         name: 'Tom',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            //     {
            //         date: '2016-05-02',
            //         name: 'John',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            //     {
            //         date: '2016-05-04',
            //         name: 'Morgan',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            //     {
            //         date: '2016-05-01',
            //         name: 'Jessy',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            // ]
            this.attendType=[
                {
                    type:'加班'
                },
                {
                    type:'正常班'
                },
                {
                    type:'出差'
                }
            ]
            this.attendList()



        }
    }
</script>

<style scoped>

</style>
